<template>
  <div v-loading="loading" class="slRoles" element-loading-text="加载中...">
    <div class="login-title">
      <p v-if="showNew == 1" class="title">登录成功 · 售后服务管理系统</p>
      <p v-else class="title">创建成功 · 售后服务管理系统</p>
    </div>
    <div class="tabs">
      <div class="tab" style="color: #007cff"> 账号：{{ userStore.account }}</div>
      <div v-if="showNew == 1" class="navigation">
        <div @click="goLogin"> 返回登录 </div>
      </div>
      <div v-if="showNew == 2" class="navigation">
        <div @click="showNew = 1"> 选择角色 </div>
      </div>
      <div v-if="showNew == 3" class="navigation">
        <div @click="showNew = 1"> 选择角色 </div>
      </div>
    </div>
    <div class="list_card">
      <div v-if="showNew == 1">
        <div class="card">
          <div
            v-for="(item, index) in userStore.role"
            :key="index"
            class="card_li"
            @click="goHome(item.code, item.status)"
          >
            <div class="c_r">
              <div class="right_">
                <div class="role">{{ item.role }}</div>
                <div class="name">{{ item.name }}</div>
              </div>
              <div v-if="item.status == 1" class="left tab_1">待审核</div>
              <div v-if="item.status == 2" class="left tab_2">使用中</div>
              <div v-if="item.status == 3" class="left tab_3">已冻结</div>
              <div v-if="item.status == 4" class="left tab_3">已过期</div>
            </div>
            <div class="c_l"> 进入 </div>
          </div>
        </div>
      </div>
      <el-form
        v-if="showNew == 2"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0"
      >
        <el-form-item prop="name" class="el-item" label=" ">
          <el-input
            v-model.trim="ruleForm.name"
            placeholder="公司全称"
            type="text"
            auto-complete="on"
            clearable
          />
        </el-form-item>
        <el-form-item prop="abbrevia" class="el-item" label=" ">
          <el-input
            v-model.trim="ruleForm.abbrevia"
            placeholder="企业简称"
            type="text"
            auto-complete="on"
            clearable
          />
        </el-form-item>
        <el-form-item prop="username" class="el-item" label=" ">
          <el-input
            v-model.trim="ruleForm.username"
            placeholder="姓名"
            type="text"
            auto-complete="on"
            clearable
          />
        </el-form-item>
        <el-form-item prop="phone" class="el-item" label=" ">
          <el-input
            v-model.trim="ruleForm.phone"
            placeholder="手机号"
            maxlength="11"
            type="tel"
            auto-complete="on"
            clearable
          />
        </el-form-item>
        <el-form-item prop="telephone" class="el-item" label=" ">
          <el-input
            v-model.trim="ruleForm.telephone"
            placeholder="公司电话"
            type="tel"
            auto-complete="on"
            clearable
          />
        </el-form-item>
        <el-form-item class="el-item" label=" ">
          <SingleAddress ref="selectAddr" class="select-addr" />
        </el-form-item>
        <el-form-item class="el-item" label=" ">
          <el-input
            v-model.trim="ruleForm.address"
            placeholder="详细地址"
            type="text"
            auto-complete="on"
            clearable
            maxlength="200"
          />
        </el-form-item>
      </el-form>
      <div v-if="showNew == 3" class="success">
        <el-icon color="#fd7400" size="90">
          <SuccessFilled />
        </el-icon>
        <div class="success_text"> 恭喜 企业创建成功 </div>
        <div class="tip"> 你的资料已提交审核，请等待审核通知！ </div>
      </div>
      <!-- <el-button
        v-if="showNew == 1"
        class="login-btn"
        type="primary"
        color="#007cff"
        @click="showNew = 2"
        >新建企业</el-button
      >
      <el-button
        v-if="showNew == 2"
        class="login-btn"
        type="primary"
        color="#007cff"
        @click="submitForm(ruleFormRef)"
        >新建企业</el-button
      > -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { ElNotification, ElMessage, FormInstance, FormRules } from 'element-plus'
  import { useRouter } from 'vue-router'
  import SingleAddress from '../../../components/address/singleAddress.vue'
  import { useUserStore } from '@/store/modules/user'
  import { registerCustomer, getCustomerCode, getCustomer } from '@/api/user'
  import { getTimeState } from '@/utils'
  import { phone } from '@/utils/validate'
  import { SuccessFilled } from '@element-plus/icons-vue'

  const userStore = useUserStore()
  const router = useRouter()
  const ruleFormRef = ref<FormInstance>()
  const loading = ref(false)
  const showNew = ref(1)
  onMounted(() => {
    ruleForm.username = userStore.userInfo.name
    ruleForm.phone = userStore.userInfo.phone
    // 获取企业
    loading.value = true
    getCustomer().then((res2) => {
      if (res2.data.success) {
        userStore.account = res2.data.data.row.phone
        userStore.role = res2.data.data.row.customerRoleVos
      } else {
        ElMessage({
          showClose: true,
          message: res2.data.message,
          type: 'error',
          duration: 5000,
          plain: true,
        })
      }
      loading.value = false
    })
  })

  // 表单数据
  const ruleForm = reactive({
    abbrevia: '',
    address: '',
    area: '',
    city: '',
    fax: '',
    name: '',
    phone: '',
    province: '',
    telephone: '',
    town: '',
    cascaderA: null,
    username: '',
  })

  const rules = reactive<FormRules>({
    username: [{ required: true, message: '请填写人员名称', trigger: ['blur', 'change'] }],
    name: [{ required: true, message: '请输入公司全称', trigger: ['blur', 'change'] }],
    abbrevia: [{ required: true, message: '请输入公司简称', trigger: ['blur', 'change'] }],
    phone: [
      { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
      { validator: phone(ruleForm.phone), trigger: ['blur', 'change'] },
    ],
    telephone: [
      { required: false, message: '请填公司电话', trigger: ['blur', 'change'] },
      {
        pattern: /^\d{3,4}-?\d{7,8}$|^1[3,4,5,6,7,8,9]\d{9}$/,
        message: '电话号码格式不正确',
        trigger: ['blur', 'change'],
      },
    ],
  })

  const selectAddr = ref()

  // 回到登录
  const goLogin = () => {
    router.push({ path: '/login/index' })
  }
  // 创建企业
  const submitForm = async (formEl: FormInstance | undefined) => {
    const addr = selectAddr.value.getSelectAddr()
    ruleForm.cascaderA = addr.province
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        const data = {
          name: ruleForm.name,
          abbrevia: ruleForm.abbrevia,
          username: ruleForm.username,
          phone: ruleForm.phone,
          fax: ruleForm.fax,
          telephone: ruleForm.telephone,
          province: addr.province,
          city: addr.city,
          area: addr.area,
          town: addr.town,
          address: ruleForm.address,
        }
        loading.value = true
        registerCustomer(data).then((res) => {
          loading.value = false
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: res.data.success ? 'success' : 'error',
            duration: 5000,
            plain: true,
          })
          if (res.data.success) {
            getCustomer().then((res2) => {
              if (res2.data.success) {
                userStore.role = res2.data.data.row.customerRoleVos
                showNew.value = 3
              }
            })
          }
        })
      }
    })
  }

  // 进入系统
  const goHome = (val, status) => {
    switch (status) {
      case 1:
        ElMessage({
          message: '该企业处于待审核状态，请耐心等待！',
          type: 'warning',
          duration: 5000,
          plain: true,
          showClose: true,
        })
        break
      case 2:
        loading.value = true
        const data = { code: val }
        getCustomerCode(data).then((res) => {
          if (res.data.success) {
            userStore.token = userStore.row.tokenValue
            userStore.getInfo()
            router.push({
              path: '/',
            })
            ElNotification({
              title: getTimeState(),
              message: '欢迎登录 售后服务系统',
              type: 'success',
              duration: 1000,
            })
          } else {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
            })
          }
          loading.value = false
        })
        break
      case 3:
        ElMessage({
          message: '该企业已冻结，请注册或切换企业！',
          type: 'warning',
          duration: 5000,
          plain: true,
          showClose: true,
        })
        break
      case 4:
        ElMessage({
          message: '该企业已过期，请注册或切换企业！',
          type: 'warning',
          duration: 5000,
          plain: true,
        })
        break
    }
  }
</script>

<style lang="scss" scoped>
  $dark_gray: #889aa4;

  .login-btn {
    width: 100%;

    height: 40px;
    font-weight: bold;
    margin-bottom: 10px;
    border-radius: 0;
  }

  :deep(.el-button > span) {
    font-size: 16px;
  }

  :deep(.el-form-item.is-error .el-input__wrapper) {
    box-shadow: 0 0 0 0 transparent !important;
    border-bottom: 1px solid #f56c6c !important;
  }

  .login-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;

    .main_box {
      height: 100%;

      .login-left_img {
        height: 100%;

        // margin-right: 480px;
        .login_img {
          min-width: 260px;
          height: 100%;
          /* 使用过渡效果 */
          background-size: cover;
          background-repeat: no-repeat;
          background-position: contain;
          animation: bg-image-animation-saas 30s infinite; //saas
          // animation: bg-image-animation 30s infinite ;//格美棋
          // animation: bg-image-animation-sld 40s infinite; //施罗德

          // filter: brightness(60%);
          .text_tip {
            position: relative;
            top: 20%;
            color: #fff;

            h3 {
              font-size: 32px;
              margin-bottom: 20px;
            }

            p {
              font-size: 16px;
            }
          }
        }

        // /* 定义动画 saas*/
        @keyframes bg-image-animation-saas {
          0%,
          33% {
            background-image: url('@/assets/login/login_bg1.jpg');
          }

          33%,
          66% {
            background-image: url('@/assets/login/login_bg2.jpg');
          }

          66%,
          100% {
            background-image: url('@/assets/login/login_bg3.jpg');
          }

          100% {
            background-image: url('@/assets/login/login_bg1.jpg');
          }
        }

        /* 定义动画  格美棋*/
        @keyframes bg-image-animation {
          0%,
          33% {
            background-image: url('@/assets/login/gemake/gemake_1.jpg');
          }

          33%,
          66% {
            background-image: url('@/assets/login/gemake/gemake_2.jpg');
          }

          66%,
          100% {
            background-image: url('@/assets/login/gemake/gemake_3.jpg');
          }

          100% {
            background-image: url('@/assets/login/gemake/gemake_1.jpg');
          }
        }

        /* 定义动画  施罗德*/
        @keyframes bg-image-animation-sld {
          0%,
          32% {
            background-image: url('@/assets/login/sld/1.jpg');
          }

          33%,
          65% {
            background-image: url('@/assets/login/sld/2.jpg');
          }

          66%,
          99% {
            background-image: url('@/assets/login/sld/3.jpg');
          }

          100% {
            background-image: url('@/assets/login/sld/1.jpg');
          }
        }
      }

      .login-box {
        position: relative;
        width: 480px;
        height: 100%;
        float: right;
        background-color: #ffffffe6;
        z-index: 2;
        overflow-y: auto;
        height: 100%;
        display: flex;
        flex-direction: column;

        .logo-big {
          text-align: center;
          vertical-align: middle;
          margin-top: 48px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          align-items: center;

          .logo_image {
            width: 336px;
            height: 158px;
          }

          .name-logo {
            font-size: 32px;
            // color: #007cff;
            color: #000000a0;
            // font-weight: bold;
            width: 342px;
            letter-spacing: 6px;
            // text-shadow: 1px 1px 3px #007DFE;
            // text-shadow: 1px 1px 3px #000000bd;
          }
        }

        .login-form {
          padding: 40px 40px 0px;
          box-sizing: border-box;
          flex: 1;

          .text {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;

            .goRegister {
              color: #007cff;
              font-size: 14px;
              display: flex;
              align-items: center;
              cursor: pointer;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }

        .login-title {
          display: flex;
          flex-direction: column;
          margin-bottom: 10px;

          .title {
            margin: 0;
            font-size: 14px;
            text-align: left;
            letter-spacing: 2px;
          }
        }
      }
    }

    .footer_text {
      font-size: 12px;
      padding-bottom: 10px;
      position: relative;
      bottom: 0;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      z-index: 2;

      .url_link {
        color: #999;
      }
    }
  }

  .login-dark {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .tabs {
    height: 40px;
    width: 100%;
    background-color: #f3f7fb;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-radius: 0;
    justify-content: space-between;

    .tab_display {
      display: flex;
    }

    .tab {
      padding: 2px;
      color: #999;
      margin: 0 8px;
      font-size: 14px;
      border-bottom: 2px solid transparent;
      cursor: pointer;
    }

    .tab_temp {
      color: #007cff;
      border-bottom: 2px solid #007cff;
    }
  }

  @media screen and (max-width: 480px) {
    .login-container {
      .main_box {
        .login-box {
          width: 100%;

          .login-form {
            padding: 10% 24px 20px;
          }
        }
      }
    }
  }

  :deep(.el-input-number) {
    width: 100%;

    .el-input__inner {
      text-align: left;
    }

    .el-input__wrapper {
      padding: 1px 11px;
    }
  }

  .el-item {
    margin-bottom: 20px;
  }

  .el-item_login {
    margin-bottom: 30px;
  }

  :deep(.el-input__wrapper) {
    background-color: transparent;
    border-radius: 0;
    height: 35px;
    box-shadow: 0 0 0 1px transparent;
    border-bottom: 1px solid #dcdfe6 !important;

    &.is-focus {
      box-shadow: 0 0 0 1px transparent;
      border-bottom: 1px solid #007cff !important;
    }
  }

  :deep(.el-input .el-input__wrapper) {
    box-sizing: border-box;

    &.is-focus {
      box-shadow: 0 0 0 1px transparent;
      border-bottom: 1px solid #007cff !important;
    }
  }

  .check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0;

    .check_left {
      span {
        color: #000;
      }

      .agree_re {
        display: flex;
        color: #999;

        span {
          color: #007cff;
          cursor: pointer;
        }
      }
    }

    .check_right {
      cursor: pointer;
    }
  }

  .agree {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #999;
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 12px;
    white-space: pre-wrap;

    a {
      color: #007cff;
      cursor: pointer;
    }
  }

  .getcode {
    color: #007cff;
    cursor: pointer;
  }

  :deep(.el-form-item__error) {
    padding-top: 4px;
  }

  .slRoles {
    :deep(.el-form-item__label) {
      justify-content: space-between !important;
    }

    :deep(.el-cascader) {
      width: 100%;

      &:hover {
        border: none;
      }
    }

    .success {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      margin-top: 40px;
      height: 400px;

      .success_text {
        color: #fd7400;
        font-size: 14px;
        margin: 20px;
      }

      .tip {
        color: #999;
        font-size: 14px;
      }

      .login-btn {
        margin: 20px 0;
      }
    }

    .navigation {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: right;
      font-size: 14px;
      padding: 0 12px;
      cursor: pointer;

      &:hover {
        color: #007cff;
      }
    }

    .list_card {
      .title_card {
        color: #000;
        font-weight: 600;
        font-size: 14px;
      }

      .card {
        width: 100%;
        max-height: 50vh;
        overflow-y: auto;

        .card_li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 2px solid #f0ebeb;
          border-right: 2px solid transparent;
          box-shadow: 0 2px 5px #ebe9e997;
          margin: 10px 0;
          height: 70px;
          cursor: pointer;

          &:hover {
            border: 2px solid #007cff;
          }

          .c_r {
            display: flex;
            align-items: center;
            flex: 1;
            padding: 0 10px;

            .right_ {
              flex: 1;
              text-align: left;

              .role {
                font-weight: 600;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 200px;
                font-size: 16px;
              }

              .name {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 200px;
                margin-top: 10px;
                color: #999;
                font-size: 14px;
              }
            }

            .left {
              color: #ffffff;
              padding: 2px;
              font-size: 12px;
            }

            .tab_1 {
              background-color: #fd9001;
            }

            .tab_2 {
              background-color: #26b9ad;
            }

            .tab_3 {
              background-color: #999;
            }
          }

          .c_l {
            width: 72px;
            height: 72px;
            line-height: 60px;
            text-align: center;
            background-color: #007cff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
          }
        }
      }

      .login-btn {
        margin-top: 30px;
      }
    }

    .created {
      display: flex;
      align-items: center;
      margin: 30px 20px;

      .creat_text {
        font-size: 16px;
      }
    }
  }

  :deep(.el-cascader) {
    background-color: transparent;

    &:not(.is-disabled):hover .el-input__wrapper {
      box-shadow: 0 0 0 1px transparent;
    }

    .el-input.is-focus .el-input__wrapper {
      box-shadow: 0 0 0 1px transparent;
      border-bottom: 1px solid #007cff !important;
    }
  }

  .select-addr {
    width: 100%;
  }
</style>
